<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 客服中心</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/css/blog.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .layui-tab-title li {
            font-size: 42px;
        }

        .left-name {
            padding-bottom: 30px;
            padding-top: 30px;
        }

        .right-box {

        }
        .forminput{
            width: 90%;
            height: 60px;
            border: 1px solid green;
        }
        option{
            font-size: 20px;
        }
        .quescontent{
            width: 90%;
            height: 230px;
        }
        .layui-icon-upload{
            font-size: 60px;
        }
        .upbtn{
            width: 50%;
            height: 80px;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .tijiaobtn{
            width: 80%;
            height: 120px;
            margin-left: 10%;
            background-color: #23b14d;
            margin-top: 80px;
            border-radius: 30px;
            color: white;
        }

        .question-item{
            width: 90%;
            margin-left: 5%;
            border: 1px solid black;
            border-radius: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-bottom: 50px;
        }
        .left-title-div{
            color: grey;
            padding-left: 10px;
        }
        .right-value2{
            color: #c9222b;
        }
    </style>
</head>
<body>

<div class="layui-row search-main log-title">

    <div class="layui-col-xs2" onclick="history.go(-1)">
        <i class="layui-icon layui-icon-left return-btn"></i>
    </div>

    <div class="layui-col-xs4 layui-col-xs-offset2">客服中心</div>

</div>


<div class="layui-row blog-main">

    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">我要留言</li>
            <li>已发留言</li>
            <li>已回留言</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form id="questionform" action="/question/save" method="post">
                    <div class="layui-row left-name">留言主题：</div>
                    <div class="layui-row right-box">
                        <input type="text" name="questiontheme" class="forminput" placeholder="请输入主题">
                    </div>


                    <div class="layui-row left-name">留言类型：</div>
                    <div class="layui-row right-box">
                        <select name="questiontype">
                            <option value="">请选择留言类型</option>

                            <option value="奖项问题">奖项问题</option>
                            <option value="注册问题">注册问题</option>
                            <option value="申诉问题">申诉问题</option>
                            <option value="其他问题">其他问题</option>

                        </select>
                    </div>

                    <div class="layui-row left-name">留言内容：</div>
                    <div class="layui-row right-box">
                        <textarea class="quescontent" maxlength="1024" name="questioncontent" placeholder="请简要描述您的问题"></textarea>
                    </div>

                    <div class="layui-row left-name">图片：</div>

                    <div class="layui-row right-box">
                        <div class="layui-col-xs12">
                            <img id="uimg" width="100%">
                            <input name="image" type="hidden" id="image">
                        </div>
                    </div>

                    <div class="layui-row right-box">

                        <button type="button" class="btn btn-success upbtn" id="test3">
                            <i class="layui-icon layui-icon-upload"></i> 上传图片
                        </button>

                    </div>

                    <div class="layui-row">
                        <button class="tijiaobtn" type="button">提交反馈</button>
                    </div>
                </form>

            </div>

            <div class="layui-tab-item">

                <div class="layui-row question-item" th:each="ques:${questionDOS}">

                    <div class="layui-row">
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">主题：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questiontheme}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">类型：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questiontype}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">内容：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questioncontent}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">图片：</div>
                            <div class="layui-col-xs8 right-value">
                                <img th:src="${ques.image}" width="100%" height="100%" alt="">
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">创建时间：</div>
                            <div class="layui-col-xs8 right-value" th:text="${#dates.format(ques.createtime,'yyyy-MM-dd hh:mm:ss')}"></div>
                        </div>

                    </div>


                    <div class="layui-row">
                        <div class="layui-row left-title-div">客服回复：</div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">回复内容：</div>
                            <div class="layui-col-xs8 right-value2" th:text="${ques.returncontent}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">回复时间：</div>
                            <div class="layui-col-xs8 right-value2"
                                 th:text="${#dates.format(ques.returndate,'yyyy-MM-dd hh:mm:ss')}" ></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-tab-item">


                <div class="layui-row question-item" th:each="ques:${huifuQuestionList}">

                    <div class="layui-row">
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">主题：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questiontheme}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">类型：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questiontype}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">内容：</div>
                            <div class="layui-col-xs8 right-value" th:text="${ques.questioncontent}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">图片：</div>
                            <div class="layui-col-xs8 right-value">
                                <img th:src="${ques.image}" width="100%" height="100%" alt="">
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">创建时间：</div>
                            <div class="layui-col-xs8 right-value" th:text="${#dates.format(ques.createtime,'yyyy-MM-dd hh:mm:ss')}"></div>
                        </div>

                    </div>


                    <div class="layui-row">
                        <div class="layui-row left-title-div">客服回复：</div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">回复内容：</div>
                            <div class="layui-col-xs8 right-value2" th:text="${ques.returncontent}"></div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs4 left-title-div">回复时间：</div>
                            <div class="layui-col-xs8 right-value2"
                                 th:text="${#dates.format(ques.returndate,'yyyy-MM-dd hh:mm:ss')}" ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</div>

<script>

    $(function () {


        $(".tijiaobtn").click(function () {
            $.ajax({
                url:"/question/save",
                type:"POST",
                data:$('#questionform').serialize(),
                success:function (data) {
                    alert(data.msg);
                    $('form')[0].reset();
                }
            });
        });
    });


    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            , url: '/common/sysFile/upload' //改成您自己的上传接口
            , accept: 'file' //普通文件
            , done: function (msg) {
                $("#uimg").attr("src", msg.fileName);
                $("#image").val(msg.fileName);

            }
        });
    });


</script>
</body>
</html>